<template>
<q-dialog class="recyclebin-dialog dialog" v-model="show" persistent>
  <q-card v-drag style="min-width: 958px" class="no-shadow recyclebin-card">
    <q-card-section class="dialog-title bg-primary">
      <div class="text-center text-white">
        回收站
        <q-btn flat dense round color="primary" icon="iconfont icontubiao-67"
               @click="hideDialog()" class="fr text-white" style="font-size: 10px;margin-top: 8px"/>
      </div>
    </q-card-section>
    <q-table class="list-content table-file table-head-line scroll" :pagination="{rowsPerPage: 0}" no-data-label="暂无数据"
             :data="data" :columns="columns" row-key="id" hide-bottom>
      <template v-slot:body="props">
        <q-tr :props="props">
          <q-td key="label" :props="props">
            <q-icon class="vertical-middle" name="img:statics/svg/paper-icon.svg" style="font-size:18px;" />
            <span class="margin-l-10 name ellipsis">{{ props.row.label }}</span>
          </q-td>
          <q-td key="position" :props="props">
            <div class="ellipsis path">{{ props.row.path }}</div>
          </q-td>
          <q-td key="size" :props="props">{{ sizeFormat(props.row.size) }}</q-td>
          <q-td key="deleteBy" :props="props">{{ props.row.deleteBy }}</q-td>
          <q-td key="deleteTime" :props="props">{{ dateFormat(props.row.timestamp) }}</q-td>
          <q-menu touch-position context-menu>
            <q-list dense style="min-width: 150px">
              <q-item clickable v-close-popup @click.stop="restore(props.row)">
                <q-item-section>还原</q-item-section>
              </q-item>
              <q-item clickable v-close-popup @click.stop="deleteRecord(props.row)">
                <q-item-section>彻底删除</q-item-section>
              </q-item>
            </q-list>
          </q-menu>
        </q-tr>
      </template>
    </q-table>
  </q-card>
</q-dialog>
</template>

<script>
import { date } from 'quasar'
import { getCloudRecyclebin, restoreRecyclebin, rmFile } from 'src/boot/program/cloud'
export default {
  name: 'recyclebin-dialog',
  props: {
    curPath: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      show: false, // 控制弹框显示
      columns: [ // 列表的头部
        { name: 'label', align: 'left', label: '文件名', field: 'label', style: 'width: 30%' },
        { name: 'position', align: 'left', label: '原位置', field: 'label', style: 'width: 40%' },
        { name: 'size', align: 'left', label: '大小', field: 'size' },
        { name: 'deleteBy', align: 'left', label: '操作人', field: 'deleteBy' },
        { name: 'deleteTime', align: 'left', label: '删除日期', field: 'timestamp' }
      ],
      data: []
    }
  },
  methods: {
    showDialog () {
      this.show = true
      this.getInfoList()
    },
    hideDialog () {
      this.show = false
    },
    // 获取回收站列表
    getInfoList () {
      getCloudRecyclebin().then(res => {
        this.data = res.data.files
      })
    },
    // 还原
    restore (file) {
      console.log(file)
      const params = {
        key: file.id,
        realname: file.path
      }
      restoreRecyclebin(params).then(res => {
        this.$q.dialog({
          title: `<p class="dialog-notice-title">
<i class="iconfont icontubiao-53" ></i> 提示</p>`,
          message: `文件${file.label}还原成功`,
          html: true,
          ok: {
            unelevated: true,
            label: '确认'
          }
        })
        this.getInfoList()
        this.$emit('refresh')
      })
    },
    // 彻底删除
    deleteRecord (file) {
      console.log(file)
      rmFile(file.id).then(res => {
        this.getInfoList()
      })
    },
    // 文件大小格式化
    sizeFormat (size) {
      if (size === 0) {
        return '—'
      } else if (size / 1024 < 1) {
        return size + 'B'
      } else if (size / 1024 / 1024 < 1) {
        return (size / 1024).toFixed(2) + 'K'
      } else if (size / 1024 / 1024 / 1024 < 1) {
        return (size / 1024 / 1024).toFixed(2) + 'M'
      } else {
        return (size / 1024 / 1024 / 1024).toFixed(2) + 'G'
      }
    },
    // 时间格式化
    dateFormat (timestamp) {
      return date.formatDate(timestamp, 'YYYY-MM-DD HH:mm:ss')
    }
  }
}
</script>

<style scoped lang="stylus">
.name{
  display inline-block
  line-height 34px
  vertical-align middle
  width 213px
}
.path{
  width 300px
}

</style>
<style lang="stylus">
.recyclebin-card .table-file .q-table__middle{
  max-height 380px
}
</style>
